<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>箭头函数中this的指向</title>
</head>

<body>
  <button type="button" id="btn1">btn1</button>
  <button type="button" onclick="fn2(this)">btn2</button>

  <script>

    const fn1 = () => {
      console.log('fn1里面的this', this); // window
    }
    // fn1();

    // btn2点击：
    const fn2 = (obj) => {
      console.log('fn2里面的 obj', obj); // <button>
      console.log('fn2里面的 this', this); // window
    }


    // btn1点击时
    document.getElementById("btn1").onclick = () => {
      console.log('btn1点击时,函数里面的 this', this); // window
    }
    document.getElementById("btn1").onclick = function () {
      console.log('btn1点击时,函数里面的 this', this); // buttom节点对象
    }

    // console.log(this); // window
    /* 
        function Person() {
          this.name = "罗江莉";
          console.log(this); //Person {name: '罗江莉', say: ƒ, drink: ƒ}
          this.say = () => {
            console.log("say....", this); // Person {name: '罗江莉', say: ƒ, drink: ƒ}
          };
    
          this.drink = () => {
            console.log("drink....", this);// Person {name: '罗江莉', say: ƒ, drink: ƒ}
    
            return () => {
              console.log("drink方法返回的函数中的this", this);// Person {name: '罗江莉', say: ƒ, drink: ƒ}
            };
    
            // return function () {
            //   console.log("drink方法返回的函数中的this", this);  // window
            // };
    
          };
        }
    
        new Person().say()
        let fn3 = new Person().drink()
        fn3()  // fn3没有发现一个对象来调用它，默认是window来调用，但是，fn3是一个箭头函数。所有判断this要看创建箭头函数时，上下文环境中this指向。箭头函数里面的this指向上下文环境中this。
     */
    /* 
        let obj = {
          say() {
            console.log('say:', this); // obj对象 {say: ƒ}
    
            const change = () => {
              console.log('change', this); // obj对象 {say: ƒ}
            }
            return change;
          },
        }
    
        let x = obj.say();  // 明确谁再调用，方法又是一个普通函数，这this指向调用者。
        x();  // 方法是一个箭头函数，
     */


    let obj = {
      say: () => {
        console.log('say:', this); // window

        const change = () => {
          console.log('change', this); // window
        }
        return change;
      },
    }

    let x = obj.say();  //  方法是一个箭头函数，判断this时，优先按箭头函数所在上下文环境的this来判断。
    x(); // 方法是一个箭头函数，

  </script>

</body>

</html>